package com.rssreader.client.components;

import com.extjs.gxt.ui.client.core.Template;
import com.extjs.gxt.ui.client.util.Util;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.HTML;
import com.rssreader.shared.model.Item;

public class ItemPanel extends ContentPanel {

    private final HTML html = new HTML(); // HTML widget

    @Override
    protected void onRender(Element parent, int pos) {
	super.onRender(parent, pos);
	setHeading("Item");
	setLayout(new FitLayout());
	// HTML widget to inherit a CSS style
	html.setStylePrimaryName("item");
	add(html);
    }

    private String getTemplate() {
	StringBuilder sb = new StringBuilder();
	sb.append("<h1>{title}</h1>");
	sb.append("<p><i>{pubDate}</i></p>");
	sb.append("<hr/>");
	sb.append("<img src=\"{thumbnailUrl}\"/>");
	sb.append("<p>{description}</p>");
	return sb.toString();
    }

    public void displayItem(Item item) {
	setHeading(item.getTitle());
	Template template = new Template(getTemplate()); // 建構子應傳入HTML
	// item物件的JavaScript透過util.getJsObject方法，用來產生相關的HTML string
	html.setHTML(template.applyTemplate(Util.getJsObject(item, 1))); // ModelData,
    }
}
